<template>
    <div id="phaseCourse">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-input type="number" min="0" v-model="ActData.id" placeholder="请输入要搜索的ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="ActData.name" placeholder="请输入要搜索的名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="postPhase">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--TAble-->
        <el-table :data="ActIty" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column label="一级分类" prop="pclassifyName"></el-table-column>
            <el-table-column label="二级分类" prop="classifyName"></el-table-column>
            <el-table-column label="课程名称" prop="courseName"></el-table-column>
            <el-table-column label="课程封面">
                <template slot-scope='scope'>
                    <img v-if="scope.row.mainImg" :src='scope.row.mainImg'
                         class="mainImg">
                    <span v-else>暂未有图片</span>
                </template>
            </el-table-column>
            <el-table-column label="课程类型">
                <template slot-scope='scope'>
                    <p v-if="scope.row.type===0">新手上路</p>
                    <p v-else-if="scope.row.type===1">基本面选股</p>
                    <p v-else-if="scope.row.type===2">技术面选股</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" :disabled="true" @click="courseEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size" :total="total" style="float:right;"></el-pagination>
        </el-col>

        <!--新增-->
        <el-dialog title="添加阶段课程" v-model="addFormVisible" top="5%">
            <el-form>
                <el-form-item label="课程类型" prop="name">
                    <el-radio class="radio" v-model="addForm.type" :label=0>新手上路</el-radio>
                    <el-radio class="radio" v-model="addForm.type" :label=1>基本面选股</el-radio>
                    <el-radio class="radio" v-model="addForm.type" :label=2>技术面选股</el-radio>
                </el-form-item>
                <el-form-item label="选择类型">
                    <el-select style="width: 150px; display: inline-block" v-model="else0" placeholder="请选择" @change="elseAges">
                        <el-option
                                v-for="item in option"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select style="width: 150px; display: inline-block" v-model="else1" v-if="else0 !== null" placeholder="请选择" @visible-change="elseBel" @change="elseAge">
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select style="width: 200px; display: inline-block" v-model="else2" v-if="else1 !== null && else1 !== ''" placeholder="请选择">
                        <el-option
                                v-for="item in optionsd"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="else1 !== null && else1 !== ''">
                    <template>
                        <el-row>
                            <el-col class="elCol" :span="40">
                                <el-table :data="course" border v-if="course">
                                    <el-table-column label="ID" width="100">
                                        <template slot-scope="scope">
                                            <p v-text="scope.row.id"></p>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="课程标题">
                                        <template slot-scope="scope">
                                            <p v-text="scope.row.title"></p>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="120">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="tableDel(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row class="el-ooo">
                            <el-col class="elCol" :span="18">
                                <el-select v-model="courseAdd" filterable placeholder="请选择" size="100%" :clearable="true"
                                           @visible-change="courseSize" @change="courseCli">
                                    <el-option v-for="val in courseAddList" :key="val.id" :label="val.name" :value="val.id"></el-option>
                                </el-select>
                            </el-col>
                            <el-col class="elCol" :span="6">
                                <el-button class="addButton" @click="courseBot">添加课程</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {phaseAdd,phaseDlete,phaseList,phaseListId,phaseUpdate,marketClassifyList,courseList} from '../../api/api';
    export default {
        data() {
            return {
                else0: null,
                else1: null,
                else2: null,
                option:[
                    {
                        id: 0,
                        name: '专题课程'
                    }, {
                        id: 1,
                        name: '普通课程'
                    }
                ],
                options: [],
                optionsd: null,
                optiontr: false,
                ActIty: [],
                total: 0,
                page: 1,
                size: 5,
                ActData: {
                    id: null,
                    name: ''
                },
                listLoading: false,
                /*新增界面数据*/
                addFormVisible: false,
                addLoading: false,
                addFormRules: {
                },
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                imageUrl: '',
                descImgUrl: '',
                addForm: {
                    type: 0,
                    cid: '',
                },
                courseList: [],
                course: [],
                courseAdd: '',
                courseAddList: [],
            }
        },
        methods: {
            /*分页*/
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postPhase();
            },
            /*列表获取*/
            postPhase(){
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData
                };
                this.listLoading = true;
                phaseList(para).then((res) => {
                    console.log(res);
                    this.listLoading = false;
                    this.ActIty = res.data.content;
                    this.total = res.data.totalElements;
                });
            },
            /*新增*/
            handleAdd(){
                this.addFormVisible = true;
                this.radios();
                this.addForm= {
                    type: 0,
                    cid: '',
                };
                this.course = [];
                this.courseAdd = ''
            },
            addSubmit(){
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    let para = this.addForm;
                    for (let i=0;i<this.course.length;i++){
                        if(i===this.course.length-1){
                            para.cid += this.course[i].id+'';
                        }else{
                            para.cid += this.course[i].id+',';
                        }
                    }
                    if(this.addForm.cid === ''){this.$message({message: '请完成数据添加', type: 'error'});return;}
                    phaseAdd(para).then((res) => {
                        console.log(res);
                        this.addLoading = false;
                        if(res.code !== 20000){
                            this.$message({message: res.message, type: 'error'});
                        }else{
                            this.$message({message: res.message, type: 'success'});
                            this.addFormVisible = false;
                            this.postPhase();
                        }
                    });
                });
            },
            /*删除*/
            handleDel(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    phaseDlete(id, para).then((res) => {
                        this.listLoading = false;
                        if(res.code !== 20000){
                            this.$message({message: res.message, type: 'error'});
                        }else{
                            this.$message({message: res.message, type: 'success'});
                        }
                        this.postPhase();
                    });
                })
            },
            elseBel(val){
                if(val){
                    marketClassifyList({page: 1, size: 1000, data: {id: null, name: '', type: this.else0 , pid:0}}).then((res) => {
                        this.options = res.data.content;
                    });
                }
            },
            elseAges(val){this.else1 = '';this.else2 = '';this.course = [];this.courseAdd = '';},
            elseAge(val){
                if(val === ''){this.else2 = '';return;}
                this.else2 = this.courseAdd = '' ;
                this.course = [];
                if(this.optiontr){
                    this.optiontr = true;
                }
                for (let i=0;i<this.options.length;i++){
                    if(this.options[i].id === val){
                        this.optionsd = this.options[i].subClassifyList;
                    }
                }
            },
            radios(){
                this.else1 = this.else2 = '';
                this.course = [];
                this.courseAdd = '';
            },
            courseSize(fus) {
                if (fus) {
                    courseList({page: 1, size: 99999, data: {type: this.else0,pclassifyId: this.else1,classifyId: this.else2}}).then((res) => {
                        this.courseAddList = res.data.content;
                    });
                }
            },
            courseCli(fus){
                if(fus){
                    this.courseAdd = fus;
                }
            },
            courseBot() {
                if (this.course.length > 4) {
                    this.$message({message: '已有数据,未完成添加', type: 'error'});
                    return;
                }
                let obj = {};
                for (let j=0;j<this.courseAddList.length;j++){
                    if(this.courseAddList[j].id===this.courseAdd){
                        obj={
                            id : this.courseAddList[j].id,
                            name: this.courseAddList[j].name
                        }
                    }
                }
                if(JSON.stringify(obj) === '{}'){return}
                for (let i=0;i<this.course.length;i++){
                    if(this.course[i].id === obj.id){
                        this.$message({message: '已添加相同课程,请重新添加', type: 'error'});
                        return;
                    }
                }
                this.course.push({id:obj.id, title: obj.name});
            },
            tableDel(val) {
                for (let i=0;i<this.course.length;i++){
                    if(this.course[i].id === val.id){
                        this.course.splice(i,1)
                    }
                }
            },
        },
        mounted(){
            this.postPhase();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #phaseCourse{
        .mainImg {
            width: auto;
            height: 80px;
            padding: 10px 0;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            text-align: center;
            line-height: 1;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-ooo{
            margin: 20px 0 0;
            .el-col:nth-child(2){
                padding-left: 30px;
            }
        }
        .addButton{
            width: 100%;
        }
        .clear { clear: both; }
        .clear:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
        .clear { zoom: 1 }
    }
</style>